<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <table border="2px">
        <tr>
            <td>用户名</td>
            <td><input type="text" v-model="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" v-model="password"></td>
        </tr>
        <tr>
            <td>确认密码</td>
            <td><input type="password" v-model="verifypwd"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                男<input type="radio" name="sex" value="boy" v-model="sex">
                女<input type="radio" name="sex" value="girl" v-model="sex">
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                篮球<input type="checkbox" name="like" value="basketball" v-model="like">
                足球<input type="checkbox" name="like" value="football" v-model="like">
                羽毛球<input type="checkbox" name="like" value="ping pang" v-model="like">
            </td>
        </tr>
        <tr>
            <td>所在城市</td>
            <td>
                <select v-model="city">>
                    <option value="11000">北京</option>
                    <option value="12000">上海</option>
                    <option value="13000">广州</option>
                    <option value="14000">深圳</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>个人简介</td>
            <td>
                <textarea cols="30" rows="10" v-model="intro"></textarea>
            </td>
        </tr>
    </table>
    <button @click="register">注册</button>

</div>
</body>
<script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data:{
            message:'hello world',
            username:'',
            password:'',
            verifypwd:'',
            sex:'',
            city:'',
            like:[],
            intro:'',
        },
        methods:{
            register:function(){
            // this表示当前vue实例
            // 使用vue中的data变量的时候 使用this.变量名
                alert(this.username+this.password+this.verifypwd+this.sex+this.city+this.like+this.intro)
            }
        }
    })
</script>
</html>